import React from 'react';

// 底部导航栏
const TabBar = () => {
  // react-router的api
  const navigate = useNavigate(); // 这是 react-router 提供的一个 Hook，用于在组件中进行页面跳转
  const location = useLocation(); // 这是 react-router 提供的一个 Hook，用于获取当前页面的路由信息
  // 使用 useState 定义一个状态变量 active，存储当前选中的导航项的 key
  const [active, SetActive] = useState<string>(location.pathname ?? '/');
  // 当用户点击某个导航项时，调用 OnChange 函数。
  // SetActive(key)：更新 active 状态为点击的导航项的 key。
  // navigate(key)：使用 navigate 函数跳转到对应的页面。
  const OnChange = (key: string) => {
    SetActive(key);
    navigate(key);
  }

  return (
    <div className='footer'>
      <React.UI.TabBar onChange={OnChange} activeKey={active}>
        <React.UI.TabBar.Item
          key={'/'}
          title={'首页'}
          icon={<React.Icons.AppOutline />}
        />

        <React.UI.TabBar.Item
          key={'/business'}
          title={'我的'}
          icon={<React.Icons.UserOutline />}
        />
      </React.UI.TabBar>
    </div>
  )
}

export default TabBar;